<template>
    <div class="login-container">
        <div class="login-form-container">
            <div class="title-holder">
                <!--<img src="../assets/img/logo.png" class="logo" />-->
            </div>
            <div class="login-form-content">
                <div class=login-form-panel>
                    <div class="panel-header">
                        经销商登录
                    </div>
                    <div class="panel-body">
                        <div class="input-holder">
                            <span class="span">账户</span>
                            <el-input v-model.trim="loginForm.username"
                                      placeholder="账户">
                                <img slot="suffix"
                                     src="../assets/img/icon/icon-user.png"
                                     class="input-suffix" />
                            </el-input>
                        </div>
                        <div class="clear-30"></div>
                        <div class="input-holder">
                            <span class="span">密码</span>
                            <el-input v-model="loginForm.password"
                                      @keyup.enter.native="login"
                                      placeholder="密码"
                                      type="password">
                                <img slot="suffix"
                                     src="../assets/img/icon/icon-password.png"
                                     class="input-suffix" />
                            </el-input>
                        </div>
                        <div class="clear-40"></div>
                        <el-row>
                            <el-button type="primary" class="login-btn"
                                       @click="login">登录
                            </el-button>
                        </el-row>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import Core from "core/core";

    export default {
        data() {
            return {
                type: "system",
                loginForm: {
                    username: "",
                    password: ""
                },
                title: ""
            };
        },
        methods: {
            login() {
                let username = this.loginForm.username.trim();
                let password = this.loginForm.password.trim();
                if (!username) {
                    this.$message({
                        type: "warning",
                        message: "请输入账号!"
                    });

                    return;
                }

                if (!password) {
                    this.$message({
                        type: "warning",
                        message: "请输入密码!"
                    });
                    return;
                }

                Core.Api.Dealer.login(username, password)
                    .then(res => {
                        Core.Data.setToken(res.token);
                        Core.Data.setUser(res.admin);
                        this.$router.push("home");
                    })
                    .catch(err => {
                        this.$message({
                            type: "error",
                            message: "用户名或者密码错误!"
                        });
                    });
            }
        }
    };
</script>

<style scoped lang="scss">
    .login-container {
        height: 100%;
        width: 100%;
        background: #F3F6FA;
        padding: 120px 0 60px;

        .login-form-container {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
            .title-holder {
                margin-bottom: 80px;
                .login-title {
                    font-size: 26px;
                    color: #333;
                    font-weight: 700;
                    letter-spacing: 2.6px;
                }
                .logo {
                    width: 200px;
                    height: 36px;
                }
            }
            .login-form-content {
                text-align: center;
                .login-form-panel {
                    border: 1px solid #E0E7EF;
                    margin: 0 auto;
                    height: 380px;
                    width: 380px;
                    background: #ffffff;
                    border-radius: 4px;
                    overflow: auto;
                    .panel-header {
                        text-align: center;
                        font-weight: 500;
                        color: #34383E;
                        font-size: 16px;
                        height: 60px;
                        line-height: 60px;
                        border-bottom: 1px solid #E0E7EF;
                    }
                    .panel-body {
                        padding-top: 58px;
                        .input-holder {
                            width: 290px;
                            margin: 0 auto;
                        }
                        span {
                            display: block;
                            text-align: left;
                            font-size: 12px;
                            color: #34383E;
                            margin-bottom: 10px;
                        }
                        .el-input {
                            width: 290px;
                            .input-suffix {
                                width: 17px;
                                height: 17px;
                                position: relative;
                                top: calc(50% - 9px);
                            }
                        }
                        .el-button {
                            width: 290px;
                        }
                        .login-btn {
                            height: 40px;
                        }
                    }
                }
            }
        }
    }
</style>

<style lang="scss">
    .login-container {
        .login-btn {
            span {
                font-size: 14px;
            }
        }
        .input-holder {
            input {
                height: 34px;
            }
        }
    }

</style>
